import React, { Component } from "react";
import { Breadcrumb,Steps, Popover, Select ,Input,Upload,Modal,message,Button,Checkbox, Row, Col,DatePicker} from 'antd';
import moment from 'moment';
import {Link} from 'react-router-dom'
import axios from 'axios'
import { PlusOutlined, LoadingOutlined ,LikeOutlined} from '@ant-design/icons';
import './Fblp.css'

// ------------以下是日期选择的参数-----------------------
const dateFormat = 'YYYY/MM/DD';
// --------------------------------------------
const { Step } = Steps;
const customDot = (dot, { status, index }) => (
    <Popover
      content={
        <span>
          step {index+1} status: {status}
        </span>
      }
    >
      {dot}
    </Popover>
  );
const { Option } = Select;
const { TextArea } = Input;

// ----------------------证件照上传图片的方法---------------------------
function getBase64(img, callback) {
  const reader = new FileReader();
  reader.addEventListener('load', () => callback(reader.result));
  reader.readAsDataURL(img);
}

function beforeUpload(file) {
  const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
  if (!isJpgOrPng) {
    message.error('You can only upload JPG/PNG file!');
  }
  const isLt2M = file.size / 1024 / 1024 < 2;
  if (!isLt2M) {
    message.error('Image must smaller than 2MB!');
  }
  return isJpgOrPng && isLt2M;
}

// -------------------------------------------------
function getBase64one(file) {
    return new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = () => resolve(reader.result);
      reader.onerror = error => reject(error);
    });
  }
// -----------------------复选框方法--------------------------
function onChange(checkedValues) {
  console.log('checked = ', checkedValues);
}
// -------------------选择框方法------------------------------

class Fblp extends Component{
  constructor(props){
    super(props);
    this.fblp= React.createRef();
    this.xxcs= React.createRef();
    this.lpxc= React.createRef();
    this.fbcg= React.createRef();
    this.state = {}
}
// ------------------------------------------------------------------------------------------------------------------------------------
// -------------------------------------------------------
 handleChange1= async (e)=>{
  await this.setState({
    select1:e
  })
}
handleChange2= async (e)=>{
  await this.setState({
    select2:e
  })
}
handleChange3= async (e)=>{
  await this.setState({
    input1:e.target.value
  })
}
handleChange4= async (e)=>{
  await this.setState({
    input2:e.target.value
  })
}
handleChange5= async (e)=>{
  await this.setState({
    text1:e.target.value
  })
}
handleChange6= async (e)=>{
  await this.setState({
    select3:e
  })
}
handleChange7= async (e)=>{
  await this.setState({
    select4:e
  })
}
handleChange8= async (e)=>{
  await this.setState({
    select5:e
  })
}
handleChange9= async (e)=>{
  await this.setState({
    select6:e
  })
}
handleChange10= async (e)=>{
  await this.setState({
    select7:e
  })
}
handleChange11= async (e)=>{
  await this.setState({
    select8:e
  })
}
handleChange12= async (e)=>{
  await this.setState({
    select9:e
  })
}
handleChange13= async (e)=>{
  await this.setState({
    select10:e
  })
}
handleChange14= async (e)=>{
  await this.setState({
    select11:e
  })
}
handleChange15= async (e)=>{
  await this.setState({
    input3:e.target.value
  })
}
handleChange16= async (e)=>{
  await this.setState({
    select12:e
  })
}
handleChange17= async (e)=>{
  await this.setState({
    select13:e
  })
}
handleChange18= async (e)=>{
  await this.setState({
    input4:e.target.value
  })
}
handleChange19= async (e)=>{
  await this.setState({
    input5:e.target.value
  })
}
handleChange20= async (e)=>{
  await this.setState({
    input6:e.target.value
  })
}
handleChange21= async (e)=>{
  await this.setState({
    input7:e.target.value
  })
}
handleChange22= async (e)=>{
  await this.setState({
    select14:e
  })
}
handleChange23= async (e)=>{
  await this.setState({
    select15:e
  })
}
handleChange24= async (e)=>{
  await this.setState({
    input8:e.target.value
  })
}
handleChange25= async (e)=>{
  await this.setState({
    input9:e.target.value
  })
}
handleChange26= async (e)=>{
  await this.setState({
    input10:e.target.value
  })
}
handleChange27= async (e)=>{
  await this.setState({
    input11:e.target.value
  })
}
handleChange28= async (e)=>{
  await this.setState({
    text2:e.target.value
  })
}
handleChange29= async (e)=>{
  await this.setState({
    input12:e.target.value
  })
}
handleChange30= async (e)=>{
  await this.setState({
    text3:e.target.value
  })
}
handleChange31= async (e)=>{
  await this.setState({
    input13:e.target.value
  })
}
handleChange32= async (e)=>{
  await this.setState({
    input14:e.target.value
  })
}
handleChange33= async (e)=>{
  await this.setState({
    text4:e.target.value
  })
}
handleChange34= async (e)=>{
  await this.setState({
    input15:e.target.value
  })
}
handleChange35= async (e)=>{
  await this.setState({
    input16:e.target.value
  })
}
handleChange36= async (e)=>{
  await this.setState({
    input17:e.target.value
  })
}
handleChange37= async (e)=>{
  await this.setState({
    text5:e.target.value
  })
}
handleChange38= async (e)=>{
  await this.setState({
    text6:e.target.value
  })
}
tiao3 = ()=>{
  this.lpxc.current.focus();
  let lpxc=this.lpxc.current;
  lpxc.style.display='none';
  this.fbcg.current.focus();
  let fbcg=this.fbcg.current;
  fbcg.style.display='block';
  console.log(this.state)
  
  axios.defaults.baseURL = '/wz'
  return axios({
    url:'/jndata',
    method:'post',
    data:this.state
  }).then(res =>{
    console.log(res)
  })

}
// -------------------------------------------------------
// ------------------------------------------------------------------------------------------------------------------------------------
btnFn(){
  this.props.history.push('/Lpgl')
}
tiao(){                     //跳转到详细参数按钮方法
  this.fblp.current.focus();
  let fblp=this.fblp.current;
  fblp.style.display='none';
  this.xxcs.current.focus();
  let xxcs=this.xxcs.current;
  xxcs.style.display='block';
}
tiao2(){                     //跳转到上传楼盘相册按钮方法
  this.xxcs.current.focus();
  let xxcs=this.xxcs.current;
  xxcs.style.display='none';
  this.lpxc.current.focus();
  let lpxc=this.lpxc.current;
  lpxc.style.display='block';
}
// tiao3(){                     //跳转到上传楼盘相册按钮方法
//   this.lpxc.current.focus();
//   let lpxc=this.lpxc.current;
//   lpxc.style.display='none';
//   this.fbcg.current.focus();
//   let fbcg=this.fbcg.current;
//   fbcg.style.display='block';
// }
    render(){
        return(
            <div>
              {/* 下面是发布楼盘 */}
              <div className='fblp' ref={this.fblp} style={{display:'block'}}>
                <Breadcrumb>
                    <Breadcrumb.Item>首页</Breadcrumb.Item>
                    <Breadcrumb.Item>
                    <a href="www.baidu.com">新房</a>
                    </Breadcrumb.Item>
                    <Breadcrumb.Item>
                    <a href="www.baidu.com">发布楼盘</a>
                    </Breadcrumb.Item>
                </Breadcrumb>
                <div className="xiahuaxian1"></div>
                <div className="xiahuaxian">发布楼盘</div>
                <div className="xiahuaxian1"></div>
                {/*  */}
                <Steps current={0} progressDot={customDot} style={{margin:'50px 0'}}>
                    <Step title="STEP1" description="楼盘概要描述" ></Step>
                    <Step title="STEP2" description="楼盘详细参数" ></Step>
                    <Step title="STEP3" description="上传楼盘相册" ></Step>
                    <Step title="STEP4" description="楼盘发布成功" ></Step>
                </Steps>
                {/*  */}
               <div className='big'>
                   {/* ----------------------------------------------- */}
                    <div className='one'>
                        <div className='one_1'>楼盘物业类型</div>
                        <div className='one_2'><div className='one_div'><span className='one_span'>*</span><span>物业类型：</span></div></div>
                        <div className='one_3'>
                        <Select className="myselect" value={this.state.select1} defaultValue="住宅" style={{ width: 120,margin:'20px' }} onChange={this.handleChange1}>
                            <Option value="请选择">请选择</Option>
                            <Option value="住宅">住宅</Option>
                            <Option value="商铺">商铺</Option>
                            <Option value="写字楼" > 写字楼</Option>
                        </Select>
                        {/*  */}
                        <Select className="myselect" value={this.state.select2} defaultValue="普通住宅" style={{ width: 120,margin:'20px' }} onChange={this.handleChange2}>
                            <Option value="请选择">请选择</Option>
                            <Option value="普通住宅">普通住宅</Option>
                            <Option value="公寓">公寓</Option>
                            <Option value="别墅" > 别墅</Option>
                        </Select>
                        {/*  */}
                        
                        </div>
                    </div>
                    {/* ----------------------------------------------- */}
                    <div className='two'>
                        <div className='one_1'>楼盘概要描述</div>
                        <div className='two_1'><div className='two_div'><span className='two_span'>*</span><span>开发商名称：</span></div></div>
                        <div className='two_3'><Input value={this.state.input1} onChange={this.handleChange3} className='inpu' placeholder="请输入开发商名称..." /></div>
                        <div className='two_1'><div className='two_div'><span className='two_span'>*</span><span>楼盘名称：</span></div></div>
                        <div className='two_4'><Input value={this.state.input2} onChange={this.handleChange4} className='inpu2' placeholder="请输入楼盘名称..." /></div>
                        <div className='two_5'><div className='two_div2'><span className='two_span'>*</span><span>关键词提取：</span></div></div>
                        <div className='two_6'><TextArea value={this.state.text1} onChange={this.handleChange5} rows={4} style={{width:500,margin:'10px 10px',resize:'none'}} />
                            <div className='zi'>注意：提取楼盘检索关键词，尽可能多的提取，用逗号区分不同关键词</div>
                        </div>
                    </div>
                    {/* ----------------------------------------------- */}
                    <div className='three'>
                        <div className='three_1'><div className='three_div'><span className='three_span'>*</span><span>楼盘封面图：</span></div></div>
                        <div className='three_3'><div className='three_img'><PicturesWall /></div>
                            <div className='zi'>上传楼盘默认封面图，支持JPG、PNG格式上传，建议上传<span className='re'>尺寸大于800x800像素以上、大小不超过2M的正方形图片</span></div>
                        </div>
                    </div>
                    {/* ----------------------------------------------- */}
                    <div className='four'>
                      <div className='four_1'><div className='four_div'><span className='four_span'>*</span><span>相关证件：</span></div></div>
                      <div className='four_3'><div className='four_img'><Avatar /><div className='xiazi'>国有土地使用证</div></div></div>    
                      <div className='four_3'><div className='four_img'><Avatar /><div className='xiazi' >建设工程规划许可证</div></div></div>    
                      <div className='four_3'><div className='four_img'><Avatar /><div className='xiazi'>建筑工程施工许可证</div></div></div>    
                      <div className='four_3'><div className='four_img'><Avatar /><div className='xiazi'>建设用地规划许可证</div></div></div>    
                    </div>
                    {/* ----------------------------------------------- */}
                      <div className='five'>
                        <div className='five_1'><div className='five_div'><span className='five_span'>*</span><span>所属区位：</span></div></div>
                        <div className='five_3'>
                        <Select className="myselect" defaultValue="选择区/县" value={this.state.select3} onChange={this.handleChange6} style={{ width: 120,margin:'20px' }} >
                            <Option value="请选择">请选择</Option>
                            <Option value="住宅">住宅</Option>
                            <Option value="商铺">商铺</Option>
                            <Option value="写字楼" > 写字楼</Option>
                        </Select>
                        {/*  */}
                        <Select className="myselect" defaultValue="选择板块" value={this.state.select4} onChange={this.handleChange7} style={{ width: 120,margin:'20px' }}>
                            <Option value="请选择">请选择</Option>
                            <Option value="住宅">住宅</Option>
                            <Option value="商铺">商铺</Option>
                            <Option value="写字楼" > 写字楼</Option>
                        </Select>
                        </div>
                      </div>
                    {/* ----------------------------------------------- */}
                      <div className='six'>
                        <div className='six_1'><div className='six_div'><span className='six_span'></span><span>所属区位：</span></div></div>
                        <div className='six_3'>
                          {/*  */}
                          <div className='six_4'>
                            <span>环线位置</span>
                            <Select className="myselect" defaultValue="选择环线" value={this.state.select5} onChange={this.handleChange8} style={{ width: 120,margin:'10px' }} >
                              <Option value="请选择">请选择</Option>
                              <Option value="住宅">住宅</Option>
                              <Option value="商铺">商铺</Option>
                              <Option value="写字楼" > 写字楼</Option>
                            </Select>
                          </div>
                          {/*  */}
                          <div className='six_4'>
                            <span>轨道交通</span>
                            <Select className="myselect" defaultValue="选择线路" value={this.state.select6} onChange={this.handleChange9} style={{ width: 120,margin:'10px' }} >
                              <Option value="请选择">请选择</Option>
                              <Option value="住宅">住宅</Option>
                              <Option value="商铺">商铺</Option>
                              <Option value="写字楼" > 写字楼</Option>
                            </Select>
                            <Select className="myselect" defaultValue="选择站点" value={this.state.select7} onChange={this.handleChange10} style={{ width: 120,margin:'10px' }} >
                              <Option value="请选择">请选择</Option>
                              <Option value="住宅">住宅</Option>
                              <Option value="商铺">商铺</Option>
                              <Option value="写字楼" > 写字楼</Option>
                            </Select>
                          </div>
                          {/*  */}
                          <div className='six_4'>
                            <span>&nbsp;BRT交通</span>
                            <Select className="myselect" defaultValue="选择线路" value={this.state.select8} onChange={this.handleChange11} style={{ width: 120,margin:'10px' }} >
                              <Option value="请选择">请选择</Option>
                              <Option value="住宅">住宅</Option>
                              <Option value="商铺">商铺</Option>
                              <Option value="写字楼" > 写字楼</Option>
                            </Select>
                            <Select className="myselect" defaultValue="选择站点" value={this.state.select9} onChange={this.handleChange12} style={{ width: 120,margin:'10px' }} >
                              <Option value="请选择">请选择</Option>
                              <Option value="住宅">住宅</Option>
                              <Option value="商铺">商铺</Option>
                              <Option value="写字楼" > 写字楼</Option>
                            </Select>
                            <Select className="myselect" defaultValue="选择线路" value={this.state.select10} onChange={this.handleChange13} style={{ width: 120,marginLeft:'65px' }} >
                              <Option value="请选择">请选择</Option>
                              <Option value="住宅">住宅</Option>
                              <Option value="商铺">商铺</Option>
                              <Option value="写字楼" > 写字楼</Option>
                            </Select>
                            <Select className="myselect" defaultValue="选择站点" value={this.state.select11} onChange={this.handleChange14} style={{ width: 120,marginLeft:'20px' }} >
                              <Option value="请选择">请选择</Option>
                              <Option value="住宅">住宅</Option>
                              <Option value="商铺">商铺</Option>
                              <Option value="写字楼" > 写字楼</Option>
                            </Select>
                          </div>
                          {/*  */}
                          
                        </div>
                      </div>
                    {/* ----------------------------------------------- */}
                    {/* -------- */}
                    <div className='seven'>
                      <div className='seven_1'><div className='seven_div'><span className='seven_span'>*</span><span>楼盘地址：</span></div></div>
                      <div className='seven_3'><Input value={this.state.input3} onChange={this.handleChange15} className='inpu1' placeholder="请输入楼盘地址..." /></div>
                    </div>
                    {/* ----------------------------------------------- */}
                    <div className='eight'>
                      <div className='eight_1'><div className='eight_div'><span className='eight_span'></span><span>楼盘权重：</span></div></div>
                      <Select className="myselect" value={this.state.select12} onChange={this.handleChange16} defaultValue="5级" style={{ width: 120,margin:'10px' ,marginTop:'30px'}} >
                        <Option value="5级">5级</Option>
                        <Option value="4级">4级</Option>
                        <Option value="3级">3级</Option>
                        <Option value="2级">2级</Option>
                        <Option value="1级">1级</Option>
                      </Select>
                      <span className='myspan'>1-5级，1级最高，5级最低</span>
                    </div>
                    {/* ----------------------------------------------- */}
                    <div className='nine'>
                      <div className='nine_1'><div className='nine_div'><span className='nine_span'></span><span>合作形式：</span></div></div>
                      <Select className="myselect" value={this.state.select13} onChange={this.handleChange17} defaultValue="未合作" style={{ width: 120,margin:'10px' ,marginTop:'30px'}} >
                          <Option value="未合作">未合作</Option>
                          <Option value="分销合作">分销合作</Option>
                          <Option value="尾盘合作">尾盘合作</Option>
                          <Option value="常规规则">常规规则</Option>
                      </Select>
                    </div>
                    {/* ----------------------------------------------- */}
                    <div className='ten' ><Button className='mybtn' onClick={()=>this.tiao()} type="primary" size={"large"}>保存，下一步</Button></div>
                    {/* ----------------------------------------------- */}
               </div>
               {/*  */}
              </div>
              {/* 下面是楼盘参数 */}
              <div className='xxcs' ref={this.xxcs} style={{display:'none'}}>  
                <Breadcrumb>
                      <Breadcrumb.Item>首页</Breadcrumb.Item>
                      <Breadcrumb.Item>
                      <a href="www.baidu.com">新房</a>
                      </Breadcrumb.Item>
                      <Breadcrumb.Item>
                      <a href="www.baidu.com">楼盘参数</a>
                      </Breadcrumb.Item>
                  </Breadcrumb>
                  <div className="xiahuaxian1"></div>
                  <div className="xiahuaxian">楼盘参数</div>
                  <div className="xiahuaxian1"></div>
                  {/*  */}
                  <Steps current={1} progressDot={customDot} style={{margin:'50px 0'}}>
                      <Step title="STEP1" description="楼盘概要描述" ></Step>
                      <Step title="STEP2" description="楼盘详细参数" ></Step>
                      <Step title="STEP3" description="上传楼盘相册" ></Step>
                      <Step title="STEP4" description="楼盘发布成功" ></Step>
                  </Steps>
                  {/*  */}
                  <div className='big'>
                    {/*  */}
                    <div className='xone'>
                      <div className='xone_1'>楼盘物业类型</div>
                      <div className='xone_2'><div className='xone_div'><span className='xone_span'>*</span><span>一句话标题：</span></div></div>
                      <div className='xone_3'><Input value={this.state.input4} onChange={this.handleChange18} className='inpu3'  placeholder="请输入一句话标题..." /></div>
                    </div>
                    {/*  */}
                    <div className='xone1'>
                      <div className='xone_2'><div className='xone_div'><span className='xone_span'></span><span>优惠信息：</span></div></div>
                      <div className='xone_3'><Input value={this.state.input5} onChange={this.handleChange19} className='inpu3'  placeholder="请输入优惠信息..." /></div>
                    </div>
                    {/*  */}
                    <div className='xone1'>
                      <div className='xone_2'><div className='xone_div'><span className='xone_span'></span><span>销售电话：</span></div></div>
                      <div className='xone_3'><Input value={this.state.input6} onChange={this.handleChange20} className='inpu3'  placeholder="请输入销售电话..." /></div>
                    </div>
                    {/*  */}
                    <div className='xone1'>
                      <div className='xone_2'><div className='xone_div'><span className='xone_span'></span><span>售楼处地址：</span></div></div>
                      <div className='xone_3'><Input className='inpu3' value={this.state.input7} onChange={this.handleChange21}  placeholder="请输入售楼处地址..." /></div>
                    </div>
                    {/*  */}
                    <div className='xtwo'>
                        <div className='xtwo_1'><div className='xtwo_div'><span className='xtwo_span'>*</span><span>状态：</span></div></div>
                        <div className='xtwo_3'>
                        <Select className="myselect" value={this.state.select14} onChange={this.handleChange22} defaultValue="选择销售状态" style={{ width: 120,margin:'20px' }} >
                            <Option value="待售">待售</Option>
                            <Option value="在售">在售</Option>
                            <Option value="售罄">售罄</Option>
                        </Select>
                        {/*  */}
                        <Select className="myselect" value={this.state.select15} onChange={this.handleChange23} defaultValue="选择房源状态" style={{ width: 120,margin:'20px' }} >
                            <Option value="期房">期房</Option>
                            <Option value="现房">现房</Option>
                            <Option value="尾房">尾房</Option>
                        </Select>
                        </div>
                      </div>
                    {/*  */}
                    <div className='xthree'>
                      <div className='xthree_1'><div className='xthree_div'><span className='xthree_span'></span><span>楼盘特色：</span></div></div>
                      <div className='xthree_2'>
                        <div className='xthree_3'>
                          <Checkbox.Group style={{ width: '100%' }} onChange={onChange}>
                          <Row>
                            <Col span={4}>
                              <Checkbox value="小户型">小户型</Checkbox>
                            </Col>
                            <Col span={4}>
                              <Checkbox value="品牌开发商">品牌开发商</Checkbox>
                            </Col>
                            <Col span={4}>
                              <Checkbox value="低首付">低首付</Checkbox>
                            </Col>
                            <Col span={4}>
                              <Checkbox value="LOFT">LOFT</Checkbox>
                            </Col>
                            <Col span={4}>
                              <Checkbox value="刚需房">刚需房</Checkbox>
                            </Col>
                            <Col span={4}>
                              <Checkbox value="学区房">学区房</Checkbox>
                            </Col>
                            <Col span={4} style={{marginTop:'20px'}}>
                              <Checkbox value="拎包入住">拎包入住</Checkbox>
                            </Col>
                            <Col span={4} style={{marginTop:'20px'}}>
                              <Checkbox value="地铁房">地铁房</Checkbox>
                            </Col>
                            <Col span={4} style={{marginTop:'20px'}}>
                              <Checkbox value="花园洋房">花园洋房</Checkbox>
                            </Col>
                            <Col span={4} style={{marginTop:'20px'}}>
                              <Checkbox value="宜居生态">宜居生态</Checkbox>
                            </Col>
                          </Row>
                        </Checkbox.Group>
                        </div>
                      </div>
                    </div>
                    {/*  */}
                    <div className='xfour'>
                      <div className='xfour_1'><div className='xfour_div'><span className='xfour_span'></span><span>合作银行：</span></div></div>
                      <div className='xfour_2'>
                        <div className='xfour_3'>
                          <Checkbox.Group style={{ width: '100%' }} onChange={onChange}>
                          <Row>
                            <span className='mys'>支持贷款类别</span>
                            <Col span={4}>
                              <Checkbox value="商业贷款">商业贷款</Checkbox>
                            </Col>
                            <Col span={4}>
                              <Checkbox value="公积金贷款">公积金贷款</Checkbox>
                            </Col>
                            <Col span={4}>
                              <Checkbox value="组合贷">组合贷</Checkbox>
                            </Col>
                          </Row>
                        </Checkbox.Group>
                          <div className='add'>
                            <span className='mys'>合作银行</span>
                            <Input className='inpus' value={this.state.input8} onChange={this.handleChange24}  placeholder="请输入银行名称..." />
                            <Input className='inpus' value={this.state.input9} onChange={this.handleChange25} placeholder="请输入利率描述..." />
                          </div>
                        </div>
                      </div>
                    </div>
                    {/*  */}
                    <div className='xfive'>
                      <div className='xfive_1'><div className='xfive_div'><span className='xfive_span'></span><span>开盘信息：</span></div></div>
                      <div className='xfive_2'>
                        <div className='x1'><span className='ss'>*</span><span>开盘时间&nbsp;&nbsp;</span><Input value={this.state.input15} onChange={this.handleChange34} className='myi'  placeholder="请输入开盘时间..." /></div>
                        <div className='x2'><span>准确开盘时间&nbsp;&nbsp;&nbsp;</span><Input value={this.state.input14} onChange={this.handleChange32} className='myi'  placeholder="年/月/日" /></div>
                        <span className='ss'>*</span><span>开盘详情：&nbsp;&nbsp;</span>
                        <div className='x3'>
                          <TextArea rows={2} value={this.state.text4} onChange={this.handleChange33} style={{width:400,margin:'0',resize:'none'}} />
                        </div>
                      </div>
                    </div>
                    {/*  */}
                    <div className='xfive'>
                      <div className='xfive_1'><div className='xfive_div'><span className='xfive_span'></span><span>交房信息：</span></div></div>
                      <div className='xfive_2'>
                        <div className='x1'><span className='ss'>*</span><span>交房时间&nbsp;&nbsp;</span><Input value={this.state.input16} onChange={this.handleChange35} className='myi'  placeholder="请输入开盘时间..." /></div>
                        <div className='x2'><span>准确交房时间&nbsp;&nbsp;&nbsp;</span><Input value={this.state.input17} onChange={this.handleChange36} className='myi'  placeholder="年/月/日" /></div>
                        <span className='ss'>*</span><span>交房详情：&nbsp;&nbsp;</span>
                        <div className='x3'>
                          <TextArea rows={2} value={this.state.text5} onChange={this.handleChange37} style={{width:400,margin:'0',resize:'none'}} />
                        </div>
                      </div>
                    </div>
                    {/*  */}
                    <div className='xsix'>
                      <div className='xsix_1'>价格信息</div>
                      <div className='xsix_2'><div className='xsix_div'><span className='xsix_span'>*</span><span>楼盘均价：</span></div></div>
                      <div className='xsix_3'><Input value={this.state.input10} onChange={this.handleChange26} className='inpu6'  placeholder="请输入楼盘均价..." /><span className='ms'>元/平米</span></div>
                    </div>
                    {/*  */}
                    <div className='xsix11'>
                      <div className='xsix_2'><div className='xsix_div'><span className='xsix_span'>*</span><span>房源最低价：</span></div></div>
                      <div className='xsix_3'><Input className='inpu6' value={this.state.input11} onChange={this.handleChange27} placeholder="请输入房源最低价..." /><span className='ms'>万元/套</span></div>
                    </div>
                    {/*  */}
                    <div className='xseven'>
                      <div className='xseven_1'><div className='xseven_div'><span className='xseven_span'>*</span><span>价格描述：</span></div></div>
                      <div className='xseven_2'>
                        <TextArea rows={4} value={this.state.text2} onChange={this.handleChange28} style={{width:500,margin:'10px 10px',padding:'10px',resize:'none'}} />
                      </div>
                    </div>
                    {/*  */}
                    <div className='xsix11'>
                      <div className='xsix_2'><div className='xsix_div'><span className='xsix_span'>*</span><span>价格变动时间：</span></div></div>
                      <div className='xsix_3' id='date'><DatePicker defaultValue={moment('2020/05/12', dateFormat)} format={dateFormat} /></div>
                    </div>
                    {/*  */}
                    <div className='xsix'>
                      <div className='xsix_1'>物业配套</div>
                      <div className='xsix_2'><div className='xsix_div'><span className='xsix_span'></span><span>物业公司：</span></div></div>
                      <div className='xsix_3'><Input value={this.state.input12} onChange={this.handleChange29} className='inpu6'  placeholder="请输入物业公司..." /></div>
                    </div>
                    {/*  */}
                    <div className='xseven'>
                      <div className='xseven_1'><div className='xseven_div'><span className='xseven_span'>*</span><span>物业公司描述：</span></div></div>
                      <div className='xseven_2'>
                        <TextArea rows={4} value={this.state.text6} onChange={this.handleChange38} style={{width:500,margin:'10px 10px',padding:'10px',resize:'none'}} />
                      </div>
                    </div>
                    {/*  */}
                    <div className='xseven'>
                      <div className='xseven_1'><div className='xseven_div'><span className='xseven_span'>*</span><span>物业优势：</span></div></div>
                      <div className='xseven_2'>
                        <TextArea rows={4} value={this.state.text3} onChange={this.handleChange30} style={{width:500,margin:'10px 10px',padding:'10px',resize:'none'}} />
                      </div>
                    </div>
                    {/*  */}
                    <div className='xsix'>
                      <div className='xsix_2'><div className='xsix_div'><span className='xsix_span'>*</span><span>物业费：</span></div></div>
                      <div className='xsix_3'><Input value={this.state.input13} onChange={this.handleChange31} className='inpu6'  placeholder="请输入物业费..." /><span className='ms1'>元/平米/月</span></div>
                    </div>
                    {/*  */}
                    <div className='ten' ><Button className='mybtn' onClick={()=>this.tiao2()} type="primary" size={"large"}>保存，下一步上传楼盘相册</Button></div>
                    {/*  */}
                  </div>
              </div>
              {/* 下面是楼盘相册 */}
              <div className='' ref={this.lpxc} style={{display:'none'}}>
              <Breadcrumb>
                    <Breadcrumb.Item>首页</Breadcrumb.Item>
                    <Breadcrumb.Item>
                    <a href="www.baidu.com">新房</a>
                    </Breadcrumb.Item>
                    <Breadcrumb.Item>
                    <a href="www.baidu.com">楼盘相册</a>
                    </Breadcrumb.Item>
                </Breadcrumb>
                <div className="xiahuaxian1"></div>
                <div className="xiahuaxian">楼盘相册</div>
                <div className="xiahuaxian1"></div>
                {/*  */}
                <Steps current={2} progressDot={customDot} style={{margin:'50px 0'}}>
                    <Step title="STEP1" description="楼盘概要描述" ></Step>
                    <Step title="STEP2" description="楼盘详细参数" ></Step>
                    <Step title="STEP3" description="上传楼盘相册" ></Step>
                    <Step title="STEP4" description="楼盘发布成功" ></Step>
                </Steps>
                {/*  */}
                <div className='big kk'>
                  <div className='xsix_1'>上传楼盘相册</div>
                  <PicturesWall2 />
                </div>
                {/*  */}
                <div className='ten2' ><Button className='mybtn' onClick={()=>this.tiao3()} type="primary" size={"large"}>保存，下一步发布成功</Button></div>
                    {/*  */}
              </div>
              {/* 下面是发布成功 */}
              <div className='fbcg' ref={this.fbcg} style={{display:'none'}}>
              <Breadcrumb>
                    <Breadcrumb.Item>首页</Breadcrumb.Item>
                    <Breadcrumb.Item>
                    <a href="www.baidu.com">新房</a>
                    </Breadcrumb.Item>
                    <Breadcrumb.Item>
                    <a href="www.baidu.com">发布成功</a>
                    </Breadcrumb.Item>
                </Breadcrumb>
                <div className="xiahuaxian1"></div>
                <div className="xiahuaxian">发布成功</div>
                <div className="xiahuaxian1"></div>
                {/*  */}
                <Steps current={3} progressDot={customDot} style={{margin:'50px 0'}}>
                    <Step title="STEP1" description="楼盘概要描述" ></Step>
                    <Step title="STEP2" description="楼盘详细参数" ></Step>
                    <Step title="STEP3" description="上传楼盘相册" ></Step>
                    <Step title="STEP4" description="楼盘发布成功" ></Step>
                </Steps>
                {/*  */}
                <div className='mybig'>
                  <div className='gongxi'>
                    <div className='g1'><LikeOutlined />恭喜您，楼盘发布成功！等待管理员审核！</div>
                    <div className='nin'>您还可以：</div>
                    <ol>
                      <li><Link onClick={this.btnFn.bind(this)} to='/Lpgl' />楼盘管理</li>
                      <li>查看交易</li>
                      <li>查看个人信息</li>
                    </ol>
                  </div>
                </div>
              </div>
            </div>
        )
    }
}
//---------------------------------------

//-----------------------------
class PicturesWall extends React.Component {
    state = {
      previewVisible: false,
      previewImage: '',
      previewTitle: '',
      fileList: [],
    };
  
    handleCancel = () => this.setState({ previewVisible: false });
  
    handlePreview = async file => {
      if (!file.url && !file.preview) {
        file.preview = await getBase64one(file.originFileObj);
      }
  
      this.setState({
        previewImage: file.url || file.preview,
        previewVisible: true,
        previewTitle: file.name || file.url.substring(file.url.lastIndexOf('/') + 1),
      });
    };
  
    handleChange = ({ fileList }) => this.setState({ fileList });
  
    render() {
      const { previewVisible, previewImage, fileList, previewTitle } = this.state;
      const uploadButton = (
        <div className='mm'>
          <PlusOutlined  />
          <div className="ant-upload-text " >上传图片</div>
        </div>
      );
      return (
        <div className="clearfix ">
          <Upload
            action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
            listType="picture-card"
            fileList={fileList}
            onPreview={this.handlePreview}
            onChange={this.handleChange}
          >
            {fileList.length >= 1 ? null : uploadButton}
          </Upload>
          <Modal
            visible={previewVisible}
            title={previewTitle}
            footer={null}
            onCancel={this.handleCancel}
          >
            <img alt="example" style={{ width: '100%' }} src={previewImage} />
          </Modal>
        </div>
      );
    }
}
// ----------证件照上传图片的组件---------------------------
class Avatar extends React.Component {
  state = {
    loading: false,
  };

  handleChange = info => {
    if (info.file.status === 'uploading') {
      this.setState({ loading: true });
      return;
    }
    if (info.file.status === 'done') {
      // Get this url from response in real world.
      getBase64(info.file.originFileObj, imageUrl =>
        this.setState({
          imageUrl,
          loading: false,
        }),
      );
    }
  };

  render() {
    const uploadButton = (
      <div>
        {this.state.loading ? <LoadingOutlined /> : <PlusOutlined />}
        <div className="ant-upload-text">上传图片</div>
      </div>
    );
    const { imageUrl } = this.state;
    return (
      <Upload
        name="avatar"
        listType="picture-card"
        className="avatar-uploader"
        showUploadList={false}
        action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
        beforeUpload={beforeUpload}
        onChange={this.handleChange}
      >
        {imageUrl ? <img src={imageUrl} alt="avatar" style={{ width: '100%' }} /> : uploadButton}
      </Upload>
    );
  }
}
// ------------------------上传楼盘相册的组件-----------------------
class PicturesWall2 extends React.Component {
  state = {
    previewVisible: false,
    previewImage: '',
    previewTitle: '',
    fileList: [],
  };

  handleCancel = () => this.setState({ previewVisible: false });

  handlePreview = async file => {
    if (!file.url && !file.preview) {
      file.preview = await getBase64one(file.originFileObj);
    }

    this.setState({
      previewImage: file.url || file.preview,
      previewVisible: true,
      previewTitle: file.name || file.url.substring(file.url.lastIndexOf('/') + 1),
    });
  };

  handleChange = ({ fileList }) => this.setState({ fileList });

  render() {
    const { previewVisible, previewImage, fileList, previewTitle } = this.state;
    const uploadButton = (
      <div className='mm'>
        <PlusOutlined  />
        <div className="ant-upload-text " >上传图片</div>
      </div>
    );
    return (
      <div className="clearfix ">
        <Upload
          action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
          listType="picture-card"
          fileList={fileList}
          onPreview={this.handlePreview}
          onChange={this.handleChange}
        >
          {fileList.length >= 5 ? null : uploadButton}
        </Upload>
        <Modal
          visible={previewVisible}
          title={previewTitle}
          footer={null}
          onCancel={this.handleCancel}
        >
          <img alt="example" style={{ width: '100%' }} src={previewImage} />
        </Modal>
      </div>
    );
  }
}
// -----------------------------------------------

export default Fblp;